<template>
  <el-form ref="loginForm" :model="form" label-width="80px">
    <el-form-item label="账号">
      <el-input v-model="form.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import {login} from '@/api/user/index';
import { useRouter } from 'vue-router';

const router = useRouter();
const form = reactive({
  username: '',
  password: ''
});

const submitForm = () => {
  //验证
  
  //登陆
  login(form).then((d)=>{
    if(d.code === 200){
      ElMessage.success('登录成功');
      sessionStorage.setItem('mytoken',d.data);
      router.push({ path: '/' });
    }else{
      ElMessage.error('登录失败');
    }
  });
  


};
</script>

<style scoped>
.el-form {
  width: 300px;
  margin: 100px auto;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 24px;
}
</style>